import React from 'react';
import './insex.scss';
function TodoList (props){
  const {todoList,openCheckModal,openEditModal}=props;
  return(
    <li className="todo-list">
      <div className="checkbox">
        <input type="checkbox" checked={todoList.completed} />
      </div>
      <span className='conter' style={{'textDecoration':todoList.completed?'line-through':'none'}}>{todoList.content}--{todoList.id}</span>
      <div className='btns'>
        {/* 点击将 id 传递给父组件 */}
        <button className="btn btn-primary" onClick={()=>openCheckModal(todoList.id)}>查看</button>
        {/* 编辑按钮  同理 将id传值将该id的数据传递到弹框展示中 */}
        <button className="btn btn-warring" onClick={()=>openEditModal(todoList.id)}>编辑</button>
        <button className="btn btn-danger">删除</button>
      </div>
    </li>
  )
}
export default TodoList;